<template>
  <el-button :text="text" :type="type" :icon="icon" @click="clickHandler">{{
    label
  }}</el-button>
</template>
<script>
export default {
  name: 'DeleteButton',
  emits: ['confirm'],
  props: {
    text: {
      type: Boolean,
      default: true,
    },
    type: {
      type: String,
      default: 'primary',
    },
    icon: {
      type: String,
      default: 'delete',
    },
    label: {
      type: String,
      default: '删除',
    },
    message: {
      type: String,
      default: () => {
        return '是否确认删除该数据'
      },
    },
  },
  methods: {
    clickHandler() {
      this.$confirm(this.message, '提示', {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        beforeClose: async (action, instance, done) => {
          if (action == 'confirm') {
            instance.confirmButtonLoading = true
            this.$emit('confirm', { instance, done })
          } else {
            done()
          }
        },
      }).catch(console.debug)
    },
  },
}
</script>
